import React, { useEffect, useState } from "react"
// import  menu  from "../../config";
import * as Icon from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { UseDispatch, useDispatch } from "react-redux";
import { selectMenuList } from "../../store/reducers/tab";
  import { Layout, Menu, Button,theme } from 'antd';
  const { Header, Sider, Content } = Layout;

  
const CommonAside=({collapsed})=>{
    //动态获取
    const [menu,setMenu] =useState([])  //处理菜单的数据
    const role = localStorage.getItem("role");

    const items=menu.map((icon)=>{
  //没有子菜单
  const child={
      key:icon.path,
      // icon: iconToElement(icon.icon),
      label: icon.label
  }
  //有子菜单
  if(icon.children){
      child.children=icon.children.map(item=>{
          return{
              key:item.path,
              label:item.label
          }
      })
  }
  return child
    })
 
  useEffect(()=>{
    if (role === "user") {
      setMenu([
        {
          path: "/home",
          name: "home",
          label: "首页",
          icon: "HomeOutlined",
          url: "/home/index",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "ShopOutlined",
          url: "/mall/index",
        },
      ])
      
    } else {
      setMenu([
        {
          path: "/home",
          name: "home",
          label: "首页",
          icon: "HomeOutlined",
          url: "/home/index",
        },
        {
          path: "/mall",
          name: "mall",
          label: "商品管理",
          icon: "ShopOutlined",
          url: "/mall/index",
        },
        {
          path: "/user",
          name: "user",
          label: "用户管理",
          icon: "UserOutlined",
          url: "/user/index",
        },
        {
          path: "/other",
          label: "其他",
          icon: "SettingOutlined",
          children: [
            {
              path: "/other/pageOne",
              name: "page1",
              label: "页面1",
              icon: "SettingOutlined",
            },
            {
              path: "/other/pageTwo",
              name: "page2",
              label: "页面2",
              icon: "SettingOutlined",
            },
          ],
        },
      ])
    
    }
  },[])
  const navigate=useNavigate()
  const dispatch=useDispatch()
  //添加数据到store
  const setTabsList=(val)=>{
    dispatch(selectMenuList(val))
  }
    //点击菜单
const selectMenu=(e)=>{
  console.log(items,'muent');
  console.log(e,'e');
  let data
  menu.forEach(item=>{
    //找到当前的数据
    if(item.path===e.keyPath[e.keyPath.length-1]){
      data=item
      //如果是有二次菜单
      if(e.keyPath.length>1){
       data= item.children.find(child=>{
return child.path==e.key
        })
      }
    }
  })
  setTabsList({
    path:data.path,
    name:data.name,
    label:data.label
  })
  navigate(e.key)
  }
    return (
    <Sider trigger={null} collapsed={collapsed} >
    <h3 className='app-name'>{collapsed?'工作台':'小二后台管理系统'}</h3>
    <Menu
      theme="dark"
      mode="inline"
      defaultSelectedKeys={['1']}
      items={items}
      style={{
        height: '100%'
      }}
      onClick={selectMenu}
    />
  </Sider>
    )
}
export default CommonAside;